<template>
<div class="wrapper">
  <swiper ref="mySwiper" :options="swiperOption" v-if="showSwiper">
    <swiper-slide
      v-for="item of list"
      :key="item.id" 
    >
      <img
        :src="item.imgUrl"
        class="swiper-img"
      />
    </swiper-slide>
    <div class="swiper-pagination "  slot="pagination"></div>
  </swiper>
</div>

</template>
<script>
export default {
  name: "HomeSwiper",
  props:{
    list:Array
  },
  data() {
    return {
      swiperOption: {
        // 分页器配置
        pagination: '.swiper-pagination',
        // 自动切换图配置
        autoplay: 3000,
        // 环状轮播
        loop: true,
      },
      swiperList:[
        {
          id:"001",
          imgUrl:'https://imgs.qunarzz.com/vc/6d/9f/35/b8ad5468f73fd60ec0ced086f6.jpg_92.jpg'
        },
        {
          id:"002",
          imgUrl:'https://imgs.qunarzz.com/vc/44/e9/86/95bc36c9e1c06ebd68bdfe222e.jpg_92.jpg'
        }
      ]
    };
  },
  computed:{
    showSwiper(){
      return this.list.length != 0
    }
  }
  

};
</script>
<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active
  background-color:#fff !important
.wrapper
  width:100%
  height:0
  padding-bottom:31.25%
  background-color:#eee
  .swiper-img
    width:100%
</style>
